<template>
  <div class="notice-box" :class="className">
    <template v-if="data.data && data.data.length == 1">
      <div class="noticeBox">
        <div class="left-img"></div>
        <div class="tag">
          热点
        </div>
        <div class="right-box">
          <div class="notice-item" v-for="(item, index) in data.data" :key="index">
            {{ item.title }}
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
        <div class="right-icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </template>
    <template v-else-if="data.data && data.data.length > 1">
      <div class="noticeBox">
        <div class="left-img"></div>
        <div class="tag">
          热点
        </div>
        <el-carousel height="50px" direction="vertical" :autoplay="true" class="right-box" :indicator-position="'none'">
          <el-carousel-item v-for="(item, index) in data.data" :key="index" class="notice-item">
            {{ item.title }}
            <div class="content">{{ item.content }}</div>
          </el-carousel-item>
        </el-carousel>
        <div class="right-icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="image-null">
        <span class="el-icon-chat-dot-square"></span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Notice",
  props: ["data", "className"],
  mounted() {
  }
};
</script>

<style scoped lang="scss">
.notice-box {
  /* height: 70px; */
  padding: 5px 10px;



  .image-null {
    background: #ffffff;
    height: 80px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
    width: 100%;
  }

  .notice-item {
    color: #000;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 用省略号表示溢出内容 */
  }

  .noticeBox {
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    padding: 15px;
    font-size: 18px;

    .tag {
      width: 15%;
      text-align: center;
      color: #FF620C;
      border: #FF620C 1px solid;
      background-color: #fff;
      border-radius: 5px;
      font-size: 12px;
      padding: 5px;
      margin-right: 10px;

    }

    .left-img {
      width: 48px;
      height: 38px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712546838554.png");
      background-repeat: no-repeat;
      background-size: 38px 38px;
      margin-right: 10px;
      border-right: 1px solid #000;
      padding-right: 10px;
    }

    .right-box {
      width: calc(100% - 78px);
      height: 50px;

      .el-carousel__item {
        align-items: center;
        height: 50px;
        line-height: 50px;
      }

      .content {
        width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .right-icon {
      width: 20px;
    }
  }

  &.two {
    .left-img {
      width: 71px;
      height: 22px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712548107341.png");
      background-repeat: no-repeat;
      background-size: 50px 22px;
      padding-right: 10px;
      border-right: 1px solid #000;
    }

    .right-box {
      width: calc(100% - 101px);
      height: 50px;

      .notice-item {
        align-items: center;
        height: 50px;
        line-height: 50px;
      }
    }

    .right-icon {
      width: 20px;
    }
  }

  &.three {

    .left-img {
      width: 37px;
      height: 33px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712548115034.png");
      background-repeat: no-repeat;
      background-size: 27px 33px;
      margin-right: 10px;
      border-right: 1px solid #000;
      padding-right: 10px;
    }

    .right-box {
      width: calc(100% - 67px);
      height: 50px;

      .notice-item {
        align-items: center;
        height: 50px;
        line-height: 50px;
      }
    }
  }

  &.four {
    .noticeBox {}

    .left-img {
      width: 60px;
      height: 29px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712548123509.png");
      background-repeat: no-repeat;
      background-size: 50px 29px;
      margin-right: 10px;
      border-right: 1px solid #000;
      padding-right: 10px;
    }

    .right-box {
      width: calc(100% - 90px);
      height: 50px;

      .notice-item {
        align-items: center;
        height: 50px;
        line-height: 50px;
      }
    }
  }

  &.five {
    .noticeBox {

      height: 70px;
    }

    .left-img {
      width: 50px;
      height: 44px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712548130883.png");
      background-repeat: no-repeat;
      background-size: 36px 44px;
      margin-right: 10px;
      border: none;
    }

    .right-box {
      width: calc(100% - 112px);
      height: 50px;

      .notice-item {
        align-items: center;
        height: 70px;
        line-height: 20px;
      }

      .content {
        width: 270px;
        height: 40px;
        font-size: 15px;
        color: #C1C1C1;
      }
    }
  }

  &.six {
    .noticeBox {
      background-color: rgba(1, 1, 1, 0);
    }

    .left-img {
      width: 35px !important;
      height: 25px;
      background-image: url("https://pili-vod.guanxikeji.com/kongjiandongneng/img/1712548138997.png");
      background-repeat: no-repeat;
      background-size: 35px 25px;
      margin-right: 10px;
      border: none;
    }

    .right-box {
      width: calc(100% - 65px);
      height: 50px;

      .notice-item {
        align-items: center;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>
